﻿﻿<!-- #layout name=noMenu --sideType='domain'-->
<div id="app">
    <div class="page-header">
        <h1 class="title">Site binding</h1>
    </div>
    <kb-table
            :show-select="false"
            :data="tableData"
    >
        <kb-table-column :label="Kooboo.text.site.domain.site">
            <template v-slot="row">
                <a  :href="Kooboo.Route.Get(Kooboo.Route.Domain.SiteBindingSettings, {
                            SiteId: row.id
                        })" @click.stop="" style="cursor: pointer"
                >{{ row.name }}</a
                >
            </template>
        </kb-table-column>
        <kb-table-column :label="Kooboo.text.site.domain.domains">
            <template v-slot="row">
                <span class="badge blue">{{ row.bindingCount }}</span>
            </template>
        </kb-table-column>
    </kb-table>
</div>


<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/components/kbTable.js"
        ])
    })()
</script>
<script>
    $(function() {
        var self;
        new Vue({
            el: "#app",
            data: function () {
                return {
                    tableData:[]
                };
            },
            created:function () {
                self = this;
                self.getTableData()
            },
            methods:{
                getTableData: function () {
                    Kooboo.Binding.SiteBinding().then(function(res) {
                        if (res.success) {
                            self.tableData = res.model
                        }
                    })
                }

            }
        })
    })

</script>

